<template>
    <div class="inline">
        <el-button size="small" type="primary" @click="dialogVisible=true">
            <slot></slot>
        </el-button>
        <el-dialog
            :visible.sync="dialogVisible"
            title="选择"
            width="60%">
            <el-table
                :data="users"
                border
                style="width: 100%">
                <el-table-column
                    label="id"
                    prop="id"
                    width="180">
                </el-table-column>
                <el-table-column
                    label="名称"
                    prop="name"
                    width="180">
                </el-table-column>
                <el-table-column
                    label="手机号"
                    prop="mobile">
                </el-table-column>
                <el-table-column
                    #default="{row:user}"
                    label="选择"
                >
                    <el-button :disabled="form&&form.id==user.id" :type="form&&form.id==user.id?'info':'success'"
                               size="mini"
                               @click="change(user)">选择
                    </el-button>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer"></span>

        </el-dialog>
    </div>
</template>

<script>
export default {
    props: ['form'],
    data() {
        return {
            dialogVisible: false,
            users: []
        };
    },
    async created() {
        this.users = await this.axios.get('user/member');
    },
    methods: {
        change(user) {
            this.$emit('update', user)
            this.dialogVisible = false
        }
    }
};
</script>

<style scoped>

</style>
